<template>
	<h-dark :title="t('mission.title')"></h-dark>
	<view class="mx-[30rpx] mt-[20rpx]">
		<view class="ad  overflow-hidden flex items-center">
			<view class="text-white ml-[30rpx]">
				<view class="mb-[20rpx] text-2xl font-bold">
					{{t('mission.titleTips3')}}
				</view>
				<view class="">
					{{t('mission.titleTips4')}}
				</view>
			</view>
		</view>
		<view class="mt-[20rpx] pb-[30rpx]">
			<view class="bg-[#2C326B] rounded-lg px-[24rpx] py-[40rpx] mb-[20rpx]" v-for="(item, index) in data.list"
				:key="index">
				<view class="flex justify-between items-center">
					<view class="">
						<view class="" v-if="item.type==1">
							<view class="mb-[20rpx] font-bold">
								{{t('mission.typeTitle1')}}
							</view>
							<view class="mb-[10rpx] text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeTips1')}}:</text>{{item.vip_name}}
							</view>
							<view class="text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeMoney')}}:</text>{{getCurrency()}}{{item.money}} {{getCurrency2()}}
							</view>
						</view>
						<view class="" v-if="item.type==2">
							<view class="mb-[20rpx] font-bold">
								{{t('mission.typeTitle2')}}
							</view>
							<view class="mb-[10rpx] text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeTips2')}}:</text>{{getCurrency()}}{{item.recharge_money}} {{getCurrency2()}}
							</view>
							<view class="text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeMoney')}}:</text>{{getCurrency()}}{{item.money}} {{getCurrency2()}}
							</view>
						</view>
						<view class="" v-if="item.type==3">
							<view class="mb-[20rpx] font-bold">
								{{t('mission.typeTitle3')}}
							</view>
							<view class="mb-[10rpx] text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeTips3')}}:</text>{{item.invite_num}}
							</view>
							<view class="text-[#00D2E0]">
								<text class="mr-[10rpx]">{{t('mission.typeMoney')}}:</text>{{getCurrency()}}{{item.money}} {{getCurrency2()}}
							</view>
						</view>
					</view>
					<view class="ml-[30rpx]">
						<u-button type="error" size="mini" shape="circle" @click="data.show_popup=true;data.cur = index"
							v-if="item.status==0">{{t('tabs.receive')}}</u-button>
						<u-button type="primary" size="mini" shape="circle"
							v-if="item.status==1">{{t('tabs.pending')}}</u-button>
						<u-button type="success" size="mini" shape="circle" disabled="true"
							v-if="item.status==2">{{t('tabs.finish')}}</u-button>
					</view>
				</view>
				<view class="flex justify-between items-center mt-[20rpx]" v-if="item.type==3">
					<u-line-progress height="16" active-color="#4E55AF" :percent="item.percent"
						:show-percent="false"></u-line-progress>
					<view class="text-[#00D2E0] ml-[30rpx]">
						{{item.total_invite_num}}/{{item.invite_num}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup v-model="data.show_popup" mode="center" border-radius="30" width="90%" :closeable="true"
		close-icon-color="#ECECEC" close-icon-size="42">
		<view class="pt-[120rpx] pb-[50rpx] mx-[30rpx] text-center">
			<view class="flex justify-center mb-[20rpx]">
				<u-image width="180rpx" src="/static/images/mission/receive.png" mode="widthFix"></u-image>
			</view>
			<view class="mb-[40rpx]">
				{{t('mission.receiveTips')}}
			</view>
			<view class="text-2xl mb-[40rpx]">
				+{{getCurrency()}}{{data.list[data.cur]['money']}} {{getCurrency2()}}
			</view>
			<view class="mx-[24rpx]">
				<u-button type="primary" shape="circle" @click="handleReceive">{{t('mission.receiveBtn')}}</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { getMissionIndex, missionReward } from '@/api/user'
	import { t, replaceStr, getCurrency, getCurrency2,formatMoney } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('mission.title') })

	const data = reactive<{
		cur : number
		show_popup : boolean
		list : any[]
	}>({
		cur: 0,
		show_popup: false,
		list: []
	})

	const handleReceive = async () => {

		await missionReward({ id: data.list[data.cur]['record_id'] })
		data.show_popup = false
		uni.$u.toast(t('mission.receiveSuccessful'))
		getData()
	}

	const getData = async () => {
		const res = await getMissionIndex()
		data.list = res.list
	}
	getData()
</script>

<style lang="scss">
	.ad {
		background-image: url('/static/images/mission/missionbg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 112px;
		border-radius: 30rpx;
	}
</style>